<template>
  <view class="base-page">
    <globalNavBar title="参观须知" />
    <view class="notice navTop">
      <view class="list">
        <view class="list-item" v-for="item in list">
          <view class="list-item-title">
            <i class="iconfont" :class="item.iconfont"></i>
            <text>{{item.title}}</text>
          </view>
          <view class="list-item-content" v-html="context[item.key]"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import http from '@/utils/request.js'
	
export default {
  data() {
    return {
      list: [
        {id:1, iconfont: 'icon-shijian', title: '参观时间', key: 'time'},
        {id:2, iconfont: 'icon-rili', title: '参观预约', key: 'booking'},
        {id:3, iconfont: 'icon-tishi', title: '安全须知', key: 'notice'},
      ],
      context: {
        time:
          '科技馆对外开放时间为周三至周日9：00-16：30，16：00后停止检票入馆，中午不闭馆，周一周二闭关检修。节假日方式时间另行通知。【本文字内容后边会根据接口返回替换，段落，缩进等可在后台编辑时定义】',
        booking: '1.实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据实行测试数据',
        notice: '1.测试阿斯顿发射点测试阿斯顿发射点测试阿斯顿发射点测试阿斯顿发射点测试阿斯顿发射点测试阿斯顿发射点.'
      }
    }
  },
  onLoad() {
    this.getData()
  },
  methods: {
    getData() {
    // 获取数据
	var that = this;
	http.post('api/article/view_desc',{}).then(function(data){
		that.context.time = data.data.viewtime_content;
		that.context.booking = data.data.viewdesc_content;
		that.context.notice = data.data.viewsafe_content;
	})
	
    }
  }
}
</script>

<style lang="scss" scoped>
.notice {
  width: calc(100% - 60rpx);
  padding: 0 30rpx;
  .list {
    &-item {
      &-title {
        @include flex(row, flex-start, center);
        margin: 48rpx 0;
        .iconfont {
          margin-right: 12rpx;
          font-size: 38rpx;
          color: #189be9;
        }
        text {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      &:nth-child(1){
        .list-item-title .iconfont{
          font-size: 42rpx;
        }
      }
      &-content {
        padding-bottom: 100rpx;
        border-bottom: 1rpx solid #f3f3f3;
        font-size: 30rpx;
      }
    }
  }
}
</style>
